<template>
    <div>
        <div class="page_top">
            <div class="left_btn" @click="back">
                <img src="../../assets/image/back.png" alt=""/>
            </div>
            <crumbs basetitle="渠道管理" title="保司管理"></crumbs>
        </div>
        <div class="w-full box-border p-20px  mb-16px">
            <div class="w-full box-border flex items-center justify-between mb-16px">
                <div>保司管理</div>
                <div class="flex items-center gap-16px">
                    <el-select class="!w-350px" clearable v-model="companyId" filterable remote reserve-keyword
                               placeholder="只能搜索保司ID和保司名称" :remote-method="remoteMethod"
                               :loading="loading">
                        <template #prefix>
                            <el-icon>
                                <Search/>
                            </el-icon>
                        </template>
                        <el-option v-for="item in companyList" :key="item.id" :label="item.companyName"
                                   :value="item.id"/>
                    </el-select>
                    <el-button type="primary">
                        <el-icon>
                            <Plus/>
                        </el-icon>
                        新增保司
                    </el-button>
                </div>
            </div>
            <div
                class="mb-16px w-full box-border bg-#FFA8141A/10 py-16px px-14px rounded-8px flex items-start text-14px">
                <div class="flex gap-12px items-center">
                    <img class="w-14px h-16px flex-no-shrink" src="./img/billIcon.png" alt="">
                    <div>添加新的保司前请【注意以下事项】：</div>
                </div>
                <div class="flex-1 flex flex-col gap-5px">
                    <div>1、请先前往
                        <text class="font-bold">保险-保险规则</text>
                        添加您的
                        <text class="font-bold">保司规则</text>
                        <text class="text-#3E5FF5 cursor-pointer" @click="handleToRuleOfInsurance">点击前往</text>
                        ；
                    </div>
                    <div>2、如有
                        <text class="font-bold">新的渠道</text>
                        请前往
                        <text class="font-bold">渠道管理-渠道保司</text>
                        添加，如该渠道需
                        <text class="font-bold">APl数据对接</text>
                        请在
                        <text class="font-bold">渠道系统-渠道保司-接口配置</text>
                        添加配置
                        <text class="text-#3E5FF5 cursor-pointer" @click="handleToChannelManager">点击前往</text>
                        ；
                    </div>
                </div>
            </div>
            <el-card>
                <tableComponent :tableHeader="tableHeader" v-model:pageInfo="pageInfo" :tableData="tableData"
                                @pageChange="pageChange">
                    <template #id>
                        <el-table-column label="客户ID" prop="id" width="80">
                            <template #default="scope">
                                <div class="text-#3E5FF5 cursor-pointer" @click="handelDetail(scope.row.id)">
                                    {{ scope.row.id }}
                                </div>
                            </template>
                        </el-table-column>
                    </template>
                    <template #logo>
                        <el-table-column label="保司logo" prop="logo" width="100">
                            <template #default="scope">
                                <el-image
                                    class="!w-60px !h-60px"
                                    preview-teleported
                                    :src="scope.row.logo"
                                    :zoom-rate="1.2"
                                    :max-scale="7"
                                    :min-scale="0.2"
                                    :preview-src-list="[scope.row.logo]"
                                    :initial-index="4"
                                    fit="cover"
                                />
                            </template>
                        </el-table-column>
                    </template>
                </tableComponent>
            </el-card>
        </div>
        <detailDialog v-model:show="isShow"></detailDialog>
    </div>
</template>

<script setup lang="ts">
import detailDialog from "./detail-dialog/detail-dialog.vue"
import crumbs from "../../components/crumbs.vue"
import tableComponent from '@/components/tableComponent/index.vue'
import {Plus, Search} from "@element-plus/icons-vue"
import {onMounted, ref} from "vue"
import {getcompanyapi} from "@/api/api"
import {useRouter} from "vue-router"

const isShow = ref(false)
const detailId = ref<string | number>('')
const router = useRouter()
const tableData = ref([{id: 1, logo: 'https://pic.imgdb.cn/item/660cc4d99f345e8d03af9753.jpg'}])
const tableHeader = ref([
    {
        label: '客户ID',
        prop: 'id',
    },
    {
        label: '保司logo',
        prop: 'logo',
    },
    {
        label: '保司名称',
        prop: 'payDate',
    },
    {
        label: '保司名称',
        prop: 'operatorType',
    },
    {
        label: '产品类型',
        prop: 'auditStatus',
    },
    {
        label: '保司来源',
        prop: 'remark',
    },
    {
        label: '保险规则',
        prop: 'voucherUrl',
    },
    {
        label: '邮件规则 ',
        prop: 'bankName'
    },
    {
        label: '数据对接 ',
        prop: 'bankName'
    },
    {
        label: '创建人 ',
        prop: 'bankName'
    },
    {
        label: '开户时间 ',
        prop: 'bankName'
    },
    {
        label: '账号状态 ',
        prop: 'bankName'
    },
])
const pageInfo = ref({
    pageSize: 10,
    pageNum: 1,
    total: 0,
})
const loading = ref(false)
const companyId = ref('')
const companyList = ref<any>([])
const handelDetail = (id: string | number) => {
    isShow.value = true
    detailId.value = id
}
const handleToRuleOfInsurance = () => {
    console.log('前往保险规则')
    router.push({
        path: '/rules-of-insurance',
    })
}
const handleToChannelManager = () => {
    console.log('前往渠道保司')
    router.push({
        path: '/channel-management-channel-manager',
    })
}
const getData = async () => {
    console.log('获取数据')
}
const pageChange = () => {
    getData()
}
const getCompany = async (val: any) => {
    const res: any = await getcompanyapi(val)
    console.log(res, '获取公司列表')
    companyList.value = res
    const statusMap = {
        0: '待审核',
        1: '审核通过',
        2: '审核驳回',
    } as any
    companyList.value.forEach((i: any) => {
        i.companyName =
            i.companyName +
            (i.auditStatus || i.auditStatus === 0
                ? `（${statusMap[i.auditStatus]}）`
                : '')
    })
    loading.value = false
}
const remoteMethod = (query: string) => {
    if (query) {
        loading.value = true
        getCompany(query)
    } else {
        companyList.value = []
    }
}

const back = () => {
    window.history.back();
};
onMounted(() => {
    getData()
})
</script>

<style scoped></style>